<template>
	<view class="container">
		
		<view class="header">
			<view class="title">
				当前积分
			</view>
			<view class="value">
				{{integralCount}}
			</view>
		</view>
		<view class="section">
			<view class="title">
				新手福利
			</view>
			<EarnItem  icon="https://www.innovationgloble.com/wxs/img/wx/earn-registe.png" title="新注册用户福利" desc="新注册用户福利" complete="true"/>
			<EarnItem  icon="https://www.innovationgloble.com/wxs/img/wx/earn-info.png" title="完善个人信息" desc="完善用户的个人信息"/>
		</view>
		
		<view class="section">
			<view class="title">
				日常任务
			</view>
			<EarnItem  icon="https://www.innovationgloble.com/wxs/img/wx/earn-audit.png" title="用户信息审核" desc="专家、机构身份认证"/>
			<EarnItem  icon="https://www.innovationgloble.com/wxs/img/wx/earn-publish.png" title="项目发布" desc="发布项目并审核通过"/>
		</view>
		
		<view class="section">
			<view class="title">
				推荐分享
			</view>
			<EarnItem  icon="https://www.innovationgloble.com/wxs/img/wx/earn-invite.png" title="邀请新用户" desc="机构用户和普通用户邀请成功"/>
		</view>
	</view>
</template>

<script>
	import EarnItem from '../../components/page-componnet/earn-integral-item.vue';
	export default {
		components:{
			EarnItem	
		},
		data() {
			return {
				integralCount: 0
			}
		},
		onLoad() {
			this.reqIntegral();
		},
		methods: {
			reqIntegral(){
				this.$request.get({
					url: 'manager/UserAllIntegral/selectMyIntegral',
					data: {},
				}).then(info => {
					this.integralCount = info;
				}, res => {});
			}
		}
	}
</script>

<style scoped lang="less">
	.container{
		width: 100%;
		min-height: 100vh;
		background-color: #F4F5F8;
		
		.header{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 250upx;
			background: url('https://www.innovationgloble.com/wxs/img/wx/earn-head.png') no-repeat center;
			background-size: cover;
			.title{
				color: #FFFFFF;
				font-size: 28upx;
			}
			
			.value{
				color: #FFFFFF;
				font-size: 70upx;
			}
		}
		
		.section{
			padding: 50upx 36upx;
			box-sizing: border-box;
			margin-bottom: 16upx;
			background-color: #fff;
			.title{
				font-size: 32upx;
				color: #333333;
				margin-bottom: 50upx;
			}
		}
	}
</style>
